<template>
  <el-dialog width="66%" title="导入第二步" v-model="dialogVisible" modal @close="closeDialog" draggable
    :close-on-click-modal="false" :append-to-body="true">
    <div>
      <!-- 表格上方的总数量标签 -->
      <div class="total-count">
        导入数据{{ Count.totalCount }}条，异常数据{{ Count.exceptionNum }}条
      </div>
    </div>
    <el-checkbox style="padding: 10px" v-model="checked" @change="checkedChange">仅显示异常数据</el-checkbox>
    <el-table :data="visibleData" border style="width: 100%" height="34vh" v-loading="loading"
      :row-class-name="tableRowClassName" @cell-mouse-enter="enterSelectionRows" @cell-mouse-leave="leaveSelectionRows">
      <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
      <el-table-column v-for="item of tableProps" :key="item.props" :prop="item.prop" :label="item.title"
        :width="item.width">
        <template #default="scope">
          <span v-if="scope.row[item.prop + '_dictText']">
            {{ scope.row[item.prop + '_dictText'] }}
          </span>
          <span v-else-if="item.prop === 'stageStatus'">
            <el-tag v-if="scope.row.stageStatus == 0">未上架</el-tag>
            <el-tag v-if="scope.row.stageStatus == 1" type="success">已上架</el-tag>
            <el-tag v-if="scope.row.stageStatus == 2" type="danger">已下架</el-tag>
          </span>
          <span v-else-if="item.prop === 'storeStatus'">
            <el-tag v-if="scope.row.storeStatus == 0">未入库</el-tag>
            <el-tag v-if="scope.row.storeStatus == 1" type="success">在库</el-tag>
            <el-tag v-if="scope.row.storeStatus == 2" type="danger">离库</el-tag>
          </span>
          <span v-else>{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination ref="pagination" :totalCount="Count.totalCount" @pagination="pagination" :pageSizes="pageSizes"
      style="margin-top: 10px"></pagination>

    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog" size="mini">取 消</el-button>
      <el-button type="primary" @click="importData" size="mini">导 入</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { impArchiveStep2, impBoxStep2, impOver } from '@/api/rfid/label'
export default {
  name: 'importTwoDialog',
  props: {
    excelData: {
      type: Object,
      default: () => { },
    },
  },
  data() {
    return {
      type: '',
      dialogVisible: false,
      tableData: [],
      tableProps: [],
      visibleData: [],
      checked: false,
      loading: false,
      Count: {
        totalCount: 0,
        exceptionNum: 0,
      },
      pageSizes: [1000, 2000, 3000, 5000],
      searchModel: {
        pageNo: 1,
        pageSize: 1000,
      },
    }
  },
  methods: {
    toCamelCase(str) {
      // 首先将字符串分割成单词数组
      const words = str.split(/[-_\s]+/)

      // 如果字符串为空，返回空字符串
      if (words.length === 0) {
        return ''
      }
      // 将第一个单词小写，其余单词首字母大写，然后连接它们
      return (
        words[0].toLowerCase() +
        words
          .slice(1)
          .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
          .join('')
      )
    },
    init(data, props, type) {
      this.type = type
      this.loading = true
      if (type === 'box') {
        impBoxStep2(data).then((res) => {
          if (res.data.code === 200) {
            this.Count = {
              totalCount: res.data.data.page.total,
              exceptionNum: res.data.data.exceptionNum,
            }
            this.tableData = res.data.data.page.records
            this.visibleData = res.data.data.page.records
            this.tableProps = props.map((item) => {
              return {
                title: item.name,
                prop: this.toCamelCase(item.key),
                width: '',
              }
            })
            this.loading = false

            this.dialogVisible = true
          } else {
            this.$message.error(res.data.message)
          }
        })
      } else if (type === 'archive') {
        impArchiveStep2(data).then((res) => {
          if (res.data.code === 200) {
            this.Count = {
              totalCount: res.data.data.page.total,
              exceptionNum: res.data.data.exceptionNum,
            }
            this.tableData = res.data.data.page.records
            this.visibleData = res.data.data.page.records
            this.tableProps = props.map((item) => {
              return {
                title: item.name,
                prop: this.toCamelCase(item.key),
                width: '',
              }
            })
            this.loading = false

            this.dialogVisible = true
          } else {
            this.$message.error(res.data.message)
          }
        })
      }
    },
    checkedChange() {
      this.excelData.data.set('exception', this.checked ? 1 : 0)
      this.init(this.excelData.data, this.excelData.props, this.excelData.type)
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.repeat === 1) {
        return 'warning-row'
      }
    },
    enterSelectionRows(row, column, cell, event) {
      if (row.repeat === 1) {
        this.createTips(event, row, row.repeatMsg)
        return
      }
    },
    leaveSelectionRows(row, column, cell, event) {
      this.removeTips(row)
    },
    createTips(el, row, value) {
      const { id } = row
      const tooltipDom = document.createElement('div')
      tooltipDom.style.cssText = `
        display: inline-block;
        position: absolute;
        top: ${el.clientY + 5}px;
        left: ${el.clientX}px;
        padding:5px 10px;
        overflow: auto;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #595959;
        background: #fff;
        border-radius: 5px;
        z-index: 19999;
        box-shadow: 0 4px 12px 1px #ccc;
      `
      tooltipDom.innerHTML = value
      tooltipDom.setAttribute('id', `tooltip-${id}`)
      // 将浮层插入到body中
      document.body.appendChild(tooltipDom)
    },
    removeTips(row) {
      const { id } = row
      const tooltipDomLeave = document.querySelectorAll(`#tooltip-${id}`)
      if (tooltipDomLeave.length) {
        tooltipDomLeave.forEach((dom) => {
          document.body.removeChild(dom)
        })
      }
    },
    importData() {
      if (this.Count.exceptionNum > 0) {
        this.$message.warning('存在异常数据，不可导入')
      } else {
        const labelType = this.excelData.type === 'box' ? 1 : 0
        impOver(labelType)
          .then((res) => {
            if (res.data.code === 200) {
              this.$message.success(res.data.message)
              this.closeDialog()
              this.$emit('ok')
            } else {
              this.$message.warning(res.data.message)
            }
          })
          .catch((err) => {
            this.$message.error(err)
          })
      }
    },
    pagination(val) {
      this.excelData.data.set('pageNo', val.page)
      this.excelData.data.set('pageSize', val.limit)
      this.init(this.excelData.data, this.excelData.props, this.excelData.type)
    },
    closeDialog() {
      this.dialogVisible = false
      this.$emit('close')
    },
  },
}
</script>

<style scoped lang="less">
.el-table .warning-row {
  background: #fde9e6;
}

.el-table .success-row {
  background: #f0f9eb;
}

.total-count {
  padding: 10px;
  background-color: #ecf5ff;
  border-color: #d9ecff;
  border: 1px solid transparent;
  border-radius: 4px;
  margin-bottom: 10px;
}
</style>
